<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>QHR交易</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
	<!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
     <link rel="stylesheet" href="../../css/BarlowCondensed-Bold.woff.ttf" />
	<style>
		*{
			margin: 0;
			padding: 0;

		}
		input{
			outline:none;
		}
        .business .van-tabs--card > .van-tabs__wrap{
            height: 36px;
        }
        .business .van-tabs__nav{
            padding: 0 0 !important;
        }
        .business .van-tabs__nav--card{
            height: 36px;
        }
        .business .van-tabs__nav--card .van-tab.van-tab--active{
            color: #fff;
            background-color: #2E353D;
        }
        .business .van-tabs__nav--card{
            border: 1px solid #2E353D !important;
        }
        .business .van-tabs__nav--card .van-tab{
            line-height: 36px;
            border-right: 1px solid transparent;
        }
        .business .van-tabs__nav--card .van-tab{
            color: #2E353D;
        }
        .business .van-tabs__nav--card{
            margin: 0 0;
        }
        .active{
            color: #fff;
            background-color: #2E353D;
        }
        .search-QHR .van-search__content{
            background-color: #f7f4f2;
            border-radius: 18px;
        }

	</style>
</head>

<body style="background: #ffffff;">
<div id="app"  v-cloak>
    <!--<div class="transaction-notice">-->
        <!--<div class="transaction-notice-time">-->
            <!--29:59-->
        <!--</div>-->
        <!--<div class="transaction-notice-title">-->
            <!--有人响应了您的QHR买入广告，请及时处理。-->
        <!--</div>-->
        <!--<div class="transaction-notice-to">-->
            <!--<img v-src="'../../image/back_heise-1.png'">-->
        <!--</div>-->
    <!--</div>-->
    <div class="transaction-pic">
        <div class="reference-pice">
            <div class="gain">
                <div style="color: #fff;">QHR参考价(最小/最大)</div>
                <div class="gain-right">
                    <div class="gain-item">涨幅</div>
                    <div class="gain-item-number" :class="{'active_top' : data_list.growthRateType == 2}">{{data_list.growthRateType == 1 ? '+' : '-'}}{{data_list.growthRate}}%</div>
                </div>
            </div>
            <div class="gain-bottom">
                <span style="font-size: 12px">≈</span>
                <span class="font-number">{{data_list.minPrice}}/{{data_list.maxPrice}}</span>
                <span style="font-size: 12px">CNY</span>
            </div>
        </div>
        <div class="day-pic">
            <div>最高价(昨/今)</div>
            <div>当前买量</div>
            <div>今日成交量</div>
        </div>
        <div class="day-pic-number">
            <div>{{data_list.y_tallestPrice}}/{{data_list.t_tallestPrice}}</div>
            <div>{{data_list.buyTradeNum}}</div>
            <div>{{data_list.sucTradeNum}}</div>
        </div>
    </div>
    <div class="repair-market" v-show="data_list.isTrade == 2">
        <div class="repair-market-conduct">休市中</div>
        <!-- <div class="repair-market-conduct-time">00:23:58</div> -->
        <div class="repair-market-content">
            <div class="opening-hours">交易开放时间</div>
            <div class="opening-hours-tieme">09:30:00-21:00:00</div>
            <div class="opening-hours-notice">1、每日休市后，将不可再发起买、卖交易。</div>
            <div class="opening-hours-notice">2、休市前还未完成交易的订单可继续进行操作。</div>
            <div class="opening-hours-notice">3、每日价格可能都会存在差异，为了增加您的交易促成概率，
                您可以根据每日推荐价格，调整您发布的买入广告。</div>
        </div>
    </div>
    <div class="business" v-show="data_list.isTrade == 1">
        <van-tabs v-model='active_tab' type="card">
            <van-tab title="我要买QHR">
                <div class="business-title">
                    <div class="business-title-num">{{(number)*(label)}}</div>
                    <div class="business-title-head">预付总额 CNY</div>
                    <div class="unit-price-title">设置单价</div>
                    <div class="QHR-number">
                        <input class="QHR-number-input" id="input" type="number" v-model="number" value="0" onchange="addkk({$row.id})" id="num{$row.id}" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();">
                        <img class="business-img" src="../../image/small/logon_del.png" v-myclick="deletephone">
                        <div class="business-CNY">CNY</div>
                    </div>
                    <div class="unit-price-title">买入数量</div>
                    <div class="buy-title">
                        <div class="buy-number">
                            <div v-for="(data,index) in list" :class="{active:index == addindex}" v-myclick="[index, changestyle]">{{data}}</div>
                        </div>
                        <div class="business-QHR">QHR</div>
                    </div>
                    <div class="buy" v-myclick='buy_qhr'>委托买入</div>
                </div>
            </van-tab>
            <van-tab title="我要卖QHR">
                <div class="QHR-sell">
                    <van-dropdown-menu>
                        <van-dropdown-item v-model="value1" :options="option1" />
                    </van-dropdown-menu>
                    <van-dropdown-menu>
                        <van-dropdown-item v-model="value2" :options="option2" />
                    </van-dropdown-menu>
                    <van-dropdown-menu>
                        <van-dropdown-item v-model="value3" :options="option3" />
                    </van-dropdown-menu>
                </div>
                <div class="search-QHR"><van-search placeholder="输入对方手机号或昵称" v-model="value" /></div>
                <div>
                    <ul>
                        <li class="seller-number" v-for="(data, index) in order_con" :key="index">
                            <div class="seller-number-title">
                                <p class="seller-letter">
                                    C
                                </p>
                                <p class="seller-name">{{data.nickname}}</p>
                                <p class="seller-pic">单价CNY：<span style="color: #2E353D">{{data.totalPrice}}</span></p>
                            </div>
                            <div class="sell-to-hi">
                                <div class="sell-to-hi-number">数量{{data.tradeNum}}QHR</div>
                                <div class="sell-to-right" v-open-win="{orderid:data.orderNo}" vurl="sell">卖给TA</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
	var vm,
			wx,
      transaction_list,
      data_list,
			content_list,
			buy_number,
			order_list,
			order_con,

	apiready = function () {
		// api.setStatusBarStyle({style: 'light', color: ''});
		// setBSImg();
		new Vue({
			el: '#blank'
		})
		wx = api.require('wx');
		// setBSImg();
		var details={
			agtVer:1,
			clientVer:1,
			ctime:201911071802959,
			cctime:201911071802959,
			sign:"abcdefg",
			token:getPrefs('token'),
		}
		var base = new Base64();
		var	item=base.encode(JSON.stringify(details))
    var data = {
        jsonData:item,
    };
    var callback=function(ret){
			var base = new Base64();
			var transaction_list = base.decode(ret.content.jsonData);
					data_list =JSON.parse( transaction_list);
        // transaction_list = ret.content;
        // data_list =JSON.parse( $.base64.decode(ret.content.jsonData));
				// content_list=JSON.parse(data_list);
				console.log(JSON.stringify(data_list));
				console.log("================="+data_list.growthRate);
        initApp();
    }
    pinet.post(APIURLP+'/play/td/getTradeRule',data, callback);
		doubleBack();
		api.parseTapmode();
		addListeners();
	};

	function initApp() {
		// var isBigImg = Vue.BSImg == 'big';
		vm = new Vue({
			el: '#app',
			data: {
								active_tab:0,
                number:0,
                list:[1,5,10,20,50],
                addindex:0,
                label:1,
                value:'',
                value1: 1,
                value2: 3,
                value3: 5,
                option1: [
                    { text: '时间降序', value: 1 },
										{ text: '时间升序', value: 2 },
                ],
                option2: [
                    { text: '数量降序', value: 3 },
										{ text: '数量升序', value: 4 },
                ],
                option3: [
                    { text: '单价降序', value: 5 },
										{ text: '单价升序', value: 6 },
                ],
                transaction_list:transaction_list,
								data_list:data_list,
								content_list:content_list,
								buy_number:buy_number,
								order_list:order_list,
								order_con:order_con,
			},
			computed: {

			},
			watch:{
				active_tab: function (value) {
					this.get_orderlist();
				},
                value1: function (text) {
				    console.log('1')
                    var details = {
                        "agtVer": 1,
                        "clientVer": 1,
                        "ctime": 201911071802959,
                        "cctime": 201911071802959,
                        "sign": "abcdefg",
                        "token": getPrefs('token'),
                        "pageNumber": 1,
                        "pageSize": 10,
                        "sortType": text,
                    }
                    var base = new Base64();
                    var item = base.encode(JSON.stringify(details));
                    var data = {
                        jsonData: item,
                    };
                    var callback = function (ret) {
                        // ret=initApp(ret)
                        var base = new Base64();
                        var order_list = base.decode(ret.content.jsonData);
                        vm.order_list = JSON.parse(order_list);
                        vm.order_con = vm.order_list.oList
                        console.log(JSON.stringify(vm.order_list));
                        // console.log(JSON.stringify(vm.order_list.oList));
                    }
                    pinet.post(APIURLP + '/play/od/getData', data, callback);
                },
                value2: function (text2) {
                    console.log('2')
                    var details = {
                        "agtVer": 1,
                        "clientVer": 1,
                        "ctime": 201911071802959,
                        "cctime": 201911071802959,
                        "sign": "abcdefg",
                        "token": getPrefs('token'),
                        "pageNumber": 1,
                        "pageSize": 10,
                        "sortType": text2,
                    }
                    var base = new Base64();
                    var item = base.encode(JSON.stringify(details));
                    var data = {
                        jsonData: item,
                    };
                    var callback = function (ret) {
                        // ret=initApp(ret)
                        var base = new Base64();
                        var order_list = base.decode(ret.content.jsonData);
                        vm.order_list = JSON.parse(order_list);
                        vm.order_con = vm.order_list.oList
                        console.log(JSON.stringify(vm.order_list));
                        // console.log(JSON.stringify(vm.order_list.oList));
                    }
                    pinet.post(APIURLP + '/play/od/getData', data, callback);
                },
                value3: function (text3) {
                    console.log('3')
                    var details = {
                        "agtVer": 1,
                        "clientVer": 1,
                        "ctime": 201911071802959,
                        "cctime": 201911071802959,
                        "sign": "abcdefg",
                        "token": getPrefs('token'),
                        "pageNumber": 1,
                        "pageSize": 10,
                        "sortType": text3,
                    }
                    var base = new Base64();
                    var item = base.encode(JSON.stringify(details));
                    var data = {
                        jsonData: item,
                    };
                    var callback = function (ret) {
                        // ret=initApp(ret)
                        var base = new Base64();
                        var order_list = base.decode(ret.content.jsonData);
                        vm.order_list = JSON.parse(order_list);
                        vm.order_con = vm.order_list.oList
                        console.log(JSON.stringify(vm.order_list));
                        // console.log(JSON.stringify(vm.order_list.oList));
                    }
                    pinet.post(APIURLP + '/play/od/getData', data, callback);
                },
			},
			methods: {
                hide_name_two:function(name){
                    return new Array(name.length).join('') + name.substr(-1);
                },
                hide_name:function(name){
                    return new Array(name.length).join('*') + name.substr(-1);
                },
				get_orderlist:function(){
					var details={
						"agtVer":1,
						"clientVer":1,
						"ctime":201911071802959,
						"cctime":201911071802959,
						"sign":"abcdefg",
						"token":getPrefs('token'),
						"pageNumber":1,
						"pageSize":10,
						"sortType":1,
					}
					var base = new Base64();
				  var	item=base.encode(JSON.stringify(details));
					var data = {
			        jsonData:item,
			    };
			    var callback=function(ret){
							// ret=initApp(ret)
							var base = new Base64();
							var order_list = base.decode(ret.content.jsonData);
							vm.order_list =JSON.parse( order_list);
							vm.order_con = vm.order_list.oList
							console.log(JSON.stringify(vm.order_list));
							// console.log(JSON.stringify(vm.order_list.oList));
			    }
			    pinet.post(APIURLP+'/play/od/getData',data, callback);
				},
				buy_qhr:function(){
					var datalist={
						tradeNum:this.label,
						tradePrice:this.number,
						token:getPrefs('token'),
					}
					var base = new Base64();
				  var	item=base.encode(JSON.stringify(datalist))
					var data = {
						jsonData:item
					};
					var callback=function(ret){
						api.toast({
						    msg: '委托成功',
						    duration: 2000,
						    location: 'bottom'
						});

						console.log(JSON.stringify(ret.content.jsonData))
						// buy_number =JSON.parse( $.base64.decode(ret.content.jsonData));
						// console.log("================="buy_number);
					}
					pinet.post(APIURLP+'/play/od/addData',data, callback);
				},
        deletephone:function(){
            this.number=''
        },
        changestyle:function (index, event) {
            this.addindex = index;
            this.label = this.list[index]
            console.log(this.label)
        }

			},
		})
	}

	function addListeners(){
		api.addEventListener({
		    name: 'viewappear'
		}, function(ret, err){
			api.setStatusBarStyle({style: 'dark', color: ''});
			vm.get_orderlist();
		});
		api.addEventListener({
				name: 'reload'
		}, function () {
				window.location.reload();
		});
	}


</script>

</html>
